<template>
  <div class="">
    <div class="clearfix mar-bt">
      <div class="game-left">
        <select @change="changeOdds" class="game-pan">
          <option value="A" selected="">A盘</option>
          <option value="B">B盘</option>
          <option value="C">C盘</option>
          <option value="D">D盘</option>
        </select>
        <!-- 投注类型 -->
        <div class="game-type" v-if="gameType!=='东北盘'">
          投注类型：
          <span :class="{'active':type}" @click="chaType">快捷</span>
          <span :class="{'active':!type}" @click="catType">一般</span>
        </div>
      </div>
      <div class="game-right">
        <p class="game_type_tab" @click="changeGame">
          <span>整合</span>
          <span>广东盘</span>
          <span>东北盘</span>
        </p>
        <p class="reset" @click="reset">重新整理</p>
      </div>
    </div>
    <!-- 整合 -->
    <template v-if="gameType=='整合'">
      <template v-if="type">
        <table>
            <tr><th v-for="(value, index) in list" :key="index">{{value.head}}</th></tr>
            <tr v-for="(value, index) in list[0].itemList" :key="index">
                <td :class="{'active':val.itemList[index]?val.itemList[index].exist:'','do':(val.itemList[index]&&xiazhu)}" v-for="(val, ind) in list" :key="ind" @click="tdpush(ind,index)" :title="val.itemList[index]?val.head+' '+val.itemList[index].name:''">
                  <div class="dl" ><span :class="{'num':typeof(val.itemList[index]?val.itemList[index].name:'')=='number'}">{{val.itemList[index]?val.itemList[index].name:''}}</span></div>
                  <div class="dl td-div">{{val.itemList[index]?val.itemList[index].odds:''}}</div>
                </td>
            </tr>
        </table>
        <div class="sum">
            金额
            <input type="text" class="amount" v-model="sum" :disabled="xiahzu" />
            <input type="button" class="sure"  value="确定" @click="submit('1')"/>
            <input type="button" class="rest" value="重置" @click="sumClear" />
        </div>
      </template>
      <template v-else>
          <table>
              <tr><th v-for="(value, index) in list" :key="index">{{value.head}}</th></tr>
              <tr v-for="(value, index) in list[0].itemList" :key="index">
                  <td v-for="(val, ind) in list" :key="ind" :title="val.itemList[index]?val.head+' '+val.itemList[index].name:''">
                      <div class="dd" ><span :class="{'num':typeof(val.itemList[index]?val.itemList[index].name:'')=='number'}">{{val.itemList[index]?val.itemList[index].name:''}}</span></div>
                      <div class="dd td-div">{{val.itemList[index]?val.itemList[index].odds:''}}</div>
                      <div class="dd td-input"><input :disabled="xiahzu" type="number" min="1" v-if="val.itemList[index]" v-model="val.itemList[index].exist"></div>
                  </td> 
              </tr>
          </table>
          <div class="sum">
            总金额
            <input type="text" class="amount" :value="total" disabled/>
            <input type="button" class="sure"  value="确定" @click="submit('2')"/>
            <input type="button" class="rest" value="重置" @click="reset" />
        </div>
      </template>
    </template>
    <!-- 广东盘 -->
    <template v-if="gameType=='广东盘'">
      <div class="ball-classify">
        <span v-for="(item,index) in list" :key="index" @click="changeBall(index)">{{index==5?'龙虎':item.head}}</span>
      </div>
      <template v-if="type">
        <ul class="warp-gd" v-if="listIndex!==5">
          <li :class="['pto',{'do':xiazhu},{'active':item.exist}]"  @click="tdpush(listIndex,index)" :title="list[listIndex].head+' '+item.name" v-for="(item,index) in list[listIndex].itemList" :key="index">
            <div class="ball-div" ><span :class="{'num':item.name=='1'}">{{item.name}}</span></div>
            <div class="odds-div odds">{{item.odds}}</div>
          </li>
        </ul>
        <ul class="warp-gd" v-if="listIndex!==5">
          <li :class="['total','do',{'active':item.exist}]"  @click="tdpush(5,index)" :title="list[5].head+' '+item.name" v-for="(item,index) in list[5].itemList" :key="index">
            <div class="total-div" ><span>{{item.name}}</span></div>
            <div class="total-odds odds">{{item.odds}}</div>
          </li>
        </ul>
        <div v-if="listIndex==5">
          <div class="lh-tr" v-for="(e,index) in list[5].dcList" :key="index">
            <div :title="el.title" class="lh-td" v-for="(el,il) in e.list" :key="il">
              <div class="lh-wrap do" v-for="(ele,ili) in el.itemList" :key="ili" @click="changeLh(index,il,ili)">
                <div class="wrap-bl bl-title">{{ele.name}}</div>
                <div :class="['wrap-bl','bl-odds',{'active':ele.exist}]">{{ele.odds}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="sum">
          金额
          <input type="text" class="amount" v-model="sum" :disabled="xiahzu"/>
          <input type="button" class="sure"  value="确定" @click="submit('1')"/>
          <input type="button" class="rest" value="重置" @click="sumClear" />
        </div>
      </template>
      <template v-else>
        <ul class="warp-gd" v-if="listIndex!==5">
          <li class="pto" :title="list[listIndex].head+' '+item.name" v-for="(item,index) in list[listIndex].itemList" :key="index">
            <div class="ball-wrap" ><span :class="{'num':item.name=='1'}">{{item.name}}</span></div>
            <div class="odds-wrap odds">{{item.odds}}</div>
            <div class="money-div"><input type="number" min="1" v-model="item.exist" :disabled="xiahzu"></div>
          </li>
        </ul>
        <ul class="warp-gd"  v-if="listIndex!==5">
          <li class="total" :title="list[5].head+' '+item.name" v-for="(item,index) in list[5].itemList" :key="index">
            <div class="total-wrap" ><span>{{item.name}}</span></div>
            <div class="total-wrap odds">{{item.odds}}</div>
            <div class="total-wrap"><input type="number" min="1" v-model="item.exist" :disabled="xiahzu"></div>
          </li>
        </ul>
        <div  v-if="listIndex==5">
          <div class="lh-tr" v-for="(e,index) in list[5].dcList" :key="index">
            <div :title="el.title" class="lh-td" v-for="(el,il) in e.list" :key="il">
              <div class="lh-wrap" v-for="(ele,ili) in el.itemList" :key="ili" >
                <div class="wrap-bl bl-title bl-la">{{ele.name}}</div>
                <div class="wrap-bl bl-odds bl-la">{{ele.odds}}</div>
                <div class="wrap-bl bl-la " :disabled="xiahzu"><input type="number" v-model="ele.exist"/></div>
              </div>
            </div>
          </div>
        </div>
        <div class="sum">
          总金额
          <input type="text" class="amount" :value="total" disabled/>
          <input type="button" class="sure"  value="确定" @click="submit('2')"/>
          <input type="button" class="rest" value="重置" @click="reset" />
        </div>
      </template>
    </template>
    <!-- 东北盘 -->
    <dongbei v-if="gameType=='东北盘'">
      
    </dongbei>
  </div>
</template>

<script>
// import tdr from '@/components/ssc/td/td'
import dongbei from '@/components/ssc/table/dongbei'

export default {
  name: "gametable",
  components: {dongbei},
  data() {
    return {
      xiahzu:true,
      listIndex: "0", //广东盘分球
      gameType: "整合", //下注类型
      type: true, //投注方法
      gameOdds: "A", //赔率分盘
      sum: "", //快捷投注金额
      resetList: [
        {
          head: "第一球",
          itemList: [
            { name: 1, odds: "2.1", exist: false },
            { name: 1, odds: "2.1", exist: false },
            { name: 1, odds: "2.1", exist: false },
            { name: 1, odds: "2.1", exist: false },
            { name: 1, odds: "2.1", exist: false },
            { name: 1, odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false }
          ]
        },
        {
          head: "第二球",
          itemList: [
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false }
          ]
        },
        {
          head: "第三球",
          itemList: [
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false }
          ]
        },
        {
          head: "第四球",
          itemList: [
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false }
          ]
        },
        {
          head: "第五球",
          itemList: [
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false },
            { name: "单", odds: "2.1", exist: false }
          ]
        },
        {
          head: "总和、龙虎和",
          dcList: [
            {
              ball: "球1vsn",
              list: [
                {
                  title: "龙虎1vs2",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎1vs3",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎1vs4",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎1vs5",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                }
              ]
            },
            {
              ball: "球2vsn",
              list: [
                {
                  title: "龙虎2vs3",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎2vs4",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                }
              ]
            },
            {
              ball: "球2vsn",
              list: [
                {
                  title: "龙虎2vs3",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎2vs4",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                }
              ]
            },
            {
              ball: "球2vsn",
              list: [
                {
                  title: "龙虎2vs3",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                },
                {
                  title: "龙虎2vs4",
                  itemList: [
                    { name: "龙1", odds: "2.1", exist: false },
                    { name: "和局", odds: "2.1", exist: false },
                    { name: "虎2", odds: "2.1", exist: false }
                  ]
                }
              ]
            },
          ],
          itemList: [
            { name: "总和大", odds: "2.1", exist: false },
            { name: "总和小", odds: "2.1", exist: false },
            { name: "总和单", odds: "2.1", exist: false },
            { name: "总和双", odds: "2.1", exist: false },
            { name: "龙1", odds: "2.1", exist: false },
            { name: "虎5", odds: "2.1", exist: false },
            { name: "和", odds: "2.1", exist: false }
          ]
        }
      ],
      list: []
    };
  },
  computed: {
    total() {
      let totalMoney = 0;
      this.list.forEach(e => {
        if (e.longhu)
          e.longhu.forEach(el => {
            el.exist == false || el.exist == ""
              ? ""
              : (totalMoney += parseInt(el.exist));
          });
        e.itemList.forEach(el => {
          el.exist == false || el.exist == ""
            ? ""
            : (totalMoney += parseInt(el.exist));
        });
      });
      this.list[5].dcList.forEach(e => {
        e.list.forEach(el => {
          el.itemList.forEach(ele => {
             ele.exist == false || ele.exist == ""
            ? ""
            : (totalMoney += parseInt(ele.exist));
          })
        })
      })
      return totalMoney;
    },
    ac() {
      return this.$store.state.show;
    }
  },
  created() {
    this.reset();
  },
  methods: {
    login() {
      this.$store.dispatch("login", { username: "te5st", password: "test" });
    },
    chaType() {
      this.type = true;
      this.reset();
    },
    catType() {
      this.type = false;
      this.reset();
    },
    tdpush(num, numed) {
      if(!this.xiahzu)return
      if (!this.list[num].itemList[numed]) return;
      this.list[num].itemList[numed].exist = !this.list[num].itemList[numed].exist;
    },
    reset() {
      this.list = JSON.parse(JSON.stringify(this.resetList));
    },
    sumClear() {
      this.sum = "";
    },
    changeLh(num,index,indexd){
      if(!this.xiahzu)return
      this.list[5].dcList[num].list[index].itemList[indexd].exist=!this.list[5].dcList[num].list[index].itemList[indexd].exist;
    },
    changeRootgame(text) {
      this.$store.commit("changeGame", text);
    },
    changeOdds(e) {
      console.log(e.target.value);
      this.gameOdds = e.target.value;
    },
    changeGame(e) {
      //切盘
      console.log(e.target.textContent);
      this.gameType = e.target.textContent;
      this.reset();
      this.text();
    },
    text() {
      let tet = "";
      if (this.gameType == "整合") tet = "双面彩";
      if (this.gameType == "广东盘")
        tet =
          this.gameType +
          " - " +
          (this.listIndex == "5" ? "龙虎" : this.list[this.listIndex].head);
      if (this.gameType == "东北盘") tet = this.gameType;
      this.changeRootgame(tet);
    },
    changeBall(index) {
      this.listIndex = index;
      // this.login();
      this.reset();
      this.text();
    },
    submit(type) {
      let betList = [];
      if (type == "1") {
        let list = this.list;
        if (this.total == 0 || this.total == "") {
          alert("暂无下注");
          return;
        }
        if (this.sum == 0 || this.total == "") {
          alert("请设置下注金额");
          return;
        }
        list.forEach((e, index) => {
          if (e.longhu)
            e.longhu.forEach(el => {
              el.head = e.head;
              if (el.exist == true) {
                el.exist = this.sum;
                betList.push(el);
              }
            });
          e.itemList.forEach((el, indexd) => {
            el.head = e.head;
            if (el.exist == true) {
              el.exist = this.sum;
              betList.push(el);
            }
          });
        });
      }
      if (type == "2") {
        if (this.total == 0 || this.total == "") {
          alert("暂无下注");
          return;
        }
        let list = this.list;
        list.forEach((e, index) => {
          if (e.longhu)
            e.longhu.forEach(el => {
              el.head = e.head;
              el.exist !== false || el.exist !== "" ? betList.push(el) : "";
            });
          e.itemList.forEach((el, indexd) => {
            el.head = e.head;
            el.exist !== false || el.exist !== "" ? betList.push(el) : "";
          });
        });
      }
      console.log(betList);
      this.reset();
    }
  }
};
</script>

<style lang="scss">
$col: #fe6263;
$bg: #e7e7e7; //表格背景色
$tg: #b4b4b4;
$textCol: #666;

.game-left {
  float: left;
}
.game-right {
  float: right;
}
.game-pan {
  cursor: pointer;
  text-align: center;
  appearance: none;
  border-radius: 2px;
  user-select: none;
  background-position: 90% center;
  background-repeat: no-repeat;
  border: 1px solid #aaa;
  color: #555;
  font-size: 14px;
  margin: 0;
  outline: none;
  overflow: hidden;
  padding: 5px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
}
.game-type {
  display: inline-block;
  color: $textCol;
  font-size: 14px;
  font-weight: bold;
  span {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    font-weight: normal;
    padding: 2px 10px;
    cursor: pointer;
    color: #333;
  }
  .active {
    background-color: $col;
    border: 0;
    font-weight: normal;
    padding: 2px 10px;
    cursor: pointer;
    color: #fff;
  }
}
.game_type_tab {
  display: inline-block;
  font-size: 0;
  span {
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    line-height: 28px;
    padding: 2px 10px;
    color: $textCol;
    cursor: pointer;
    font-size: 14px;
    background: #f7f7f7;
    border: solid 1px #ddd;
  }
}
.reset {
  display: inline-block;
  cursor: pointer;
  background: #fe6263;
  border: 0;
  border-radius: 3px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
}

.active div,
.active div.td-div {
  background-color: rgb(255, 242, 0);
}
span.num {
  background: url("../../assets/img/ball_b.png") center no-repeat;
}
div.dl {
  width: 50%;
}
div.dd {
  width: 33.33%;
}
div.td-div {
  font-weight: bold;
  color: #f30100;
  border-left: 1px solid $tg;
  background-color: #fff;
}
div.td-input {
  background-color: #fff;
  border-left: 1px solid $tg;
  input {
    width: 70%;
  }
}
.do {
  cursor: pointer;
}
// 整合盘
table {
  user-select: none;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid $tg;
  margin-bottom: 10px;
  tr {
    border: 1px solid $tg;
    height: 28px;
  }
  th {
    border: 1px solid $tg;
    width: 16.67%;
    background-color: rgb(204, 204, 204);
  }
  td {
    line-height: 0;
    font-size: 0;
    border: 1px solid $tg;
  }
  div {
    height: 28px;
    vertical-align: middle;
    line-height: 30px;
    display: inline-block;
    font-size: 14px;
    background-color: $bg;
  }
  span {
    font-weight: bold;
    text-align: center;
    display: inline-block;
    min-height: 30px;
    min-width: 30px;
  }
}
.sum {
  width: 300px;
  font-size: 14px;
  margin: 0 auto;
  color: #00aa00;
  .amount {
    width: 80px;
    text-align: center;
  }
  input[type="button"] {
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 3px;
  }
  .sure {
    background-color: $col;
    color: #fff;
  }
  .rest {
    color: #333;
    background-color: #d2d2d2;
  }
}

// 广东盘
.ball-div {
  width: 33%;
  background-color: $bg;
}

.odds-div {
  width: 67%;
}
.ball-wrap {
  width: 25%;
  background-color: $bg;
}
.odds-wrap {
  width: 32%;
}
.money-div {
  width: 43%;
}

.total-div {
  width: 50%;
  background-color: $bg;
}
.total-odds {
  width: 50%;
}
.total-wrap {
  width: 33.33%;
  &:first-child {
    background-color: $bg;
  }
  input {
    width: 80%;
  }
}

.ball-classify {
  background-color: $bg;
  height: 30px;
  padding: 5px;
  margin-bottom: 2px;
  span {
    height: 100%;
    color: #2e2e2e;
    border-right: 2px solid #666;
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
  }
  span:last-child {
    border-right: 0;
  }
}
.warp-gd {
  font-size: 0;
  padding: 1px 0px 0px 0px;
  margin-bottom: 2px;
  li {
    text-align: center;
    height: 30px;
    display: inline-block;
    margin-top: -1px;
    border: 1px solid grey;
    border-left-width: 0;
    div {
      font-size: 12px;
      vertical-align: middle;
      display: inline-block;
      font-size: 14px;
      height: 100%;
      line-height: 30px;
      border-right: 1px solid grey;
    }
    div:last-child {
      border-right: 0;
    }
    .odds {
      font-weight: bold;
      color: #e60012;
      font-size: 16px;
    }
    span {
      font-weight: bold;
      text-align: center;
      display: inline-block;
      min-height: 30px;
      min-width: 30px;
    }
    input {
      width: 70%;
    }
  }
  .total {
    width: 25%;
    &:first-child,
    &:nth-child(5n) {
      border-left-width: 1px;
    }
  }
  .pto {
    width: 20%;
    &:first-child,
    &:nth-child(6n) {
      border-left-width: 1px;
    }
  }
}
// 广东龙虎
.lh-tr{
  margin-bottom: 1px;
  &:first-child{
    .lh-td{
      background-color: #ffdbdb;
    }
  }
  &:nth-child(2){
    .lh-td{
      background-color: #fef9db;
    }
  }
  &:nth-child(3){
    .lh-td{
      background-color: #d0f5fd;
    }
  }
  &:last-child{
    .lh-td{
      background-color: #e7d1ff;
    }
  }
}
.lh-td{
  margin-right: 1px;
  width: 24.9%;
  display: inline-block;
  height: 100px;
  border: 2px solid #000;
  border-radius: 2px;
}
.lh-wrap{
  height: 100%;
  width: 33.33%;
  border-right: 1px solid gray;
  text-align: center;
  display: inline-block;
  &:first-child{
    border-left: 1px solid gray;
  }
}
.wrap-bl{
  border-top: 1px solid gray;
  &:last-child{
    border-bottom: 1px solid gray;
  }
}
.bl-title{
  font-size: 18px;
  font-weight: bold;
  height: 70%;
  line-height: 70px;
}
.bl-odds{
  height: 30%;
  line-height: 28px;
  color: #e60012;
  font-weight: bold;
}
.lh-wrap div.active{
  background-color: #fff200;
}
.bl-la{
  height: 33.33%;
  line-height: 30px;
  input{
    width: 70%;
  }
}
</style>
